<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>码客山威 - 角色管理</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/datepicker3.css" rel="stylesheet">
	<link href="css/bootstrap-table.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
	<style type="text/css">
		.green {
			background: rgb(50,197,210);
			color:white;
			margin-right: 5px;
		}

		.blue {
			background: rgb(53,152,220);
			color:white;
			margin-right: 5px;
		}

		.red {
			background: rgb(231,80,90);
			color:white;
			margin-right: 5px;
		}
	</style>
</head>
<body>	
	<div class="col-sm-12">		
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">角色管理</li>

			</ol>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<h3 class="page-header">角色管理</h3>
			</div>
		</div><!--/.row-->
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">角色列表</div>
					<div class="panel-body">
						<table id="mytable">
						    
						</table>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">新增角色</div>
					<div class="panel-body">
						<form id="form" method="post">
							<div class="form-horizontal">
								<div class="form-group">
									<div class="col-sm-3">
										<input type="text" class="form-control" id="rolename" placeholder="角色名称"></input>
									</div>
									<div class="col-sm-7">
										
										<input type="text" class="form-control" id="rolevalue" placeholder="角色值" aria-describedby="basic-addon3"></input>
									
									</div>
					
									<div class="col-sm-2">
										<a href="javascript:add_role()" class="btn btn-sm btn-primary">添加新角色</a>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div><!--/.row-->
	</div>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootstrap-table.js"></script>
	<script src="js/jquery.base64.js"></script>
	<script src="js/data.js"></script>
	<script>
	    var currentdate = null;
	    var columnsArray = [];

	    $(function() {
    		columnsArray.push({
				field: 'prefix',
			    title: '用户角色值',
			})
	    });

		$('#mytable').bootstrapTable('destroy').bootstrapTable({
			url:'https://www.maksdu.com/app/rp/roles?rnd='+ Math.random(),
			method: 'get',
		    toolbar: '#toobar',//工具列
		    striped: true,//隔行换色
		    cache: false,//禁用缓存
		    pagination: true,//启动分页
		    sidePagination: 'client',//分页方式
		    pageNumber: 1,//初始化table时显示的页码
		    pageSize: 10,//每页的记录行数（*）
		    showFooter: false,//是否显示列脚
		    showPaginationSwitch: true,//是否显示 数据条数选择框
		    
		    sortable: true,//排序
		    search: true,//启用搜索
		    showColumns: true,//是否显示 内容列下拉框
		    showRefresh: true,//显示刷新按钮
		    idField: 'SystemCode',//key值栏位
		    clickToSelect: true,//点击选中checkbox
		    singleSelect: true,//启用单行选中
    		headers: {
		    	'request_access_token': window.localStorage.getItem('token'),
				'request_header_username': window.localStorage.getItem('username')
		    }, 		
		    responseHandler:function (res) {
		    	var data = res.result.value;
		    	
		    	console.info(data);
				data[0].permission.forEach(function(per,index){
					columnsArray.push({
						field:per,
						title:per
					});
				});
				columnsArray.push({
					field: 'createTime',
					title: '操作',
					sortable: true,
					formatter: actionFormatter
				});
				console.info(columnsArray);
                return res.result.value;
            },
		    queryParams : function (params) {
	            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	            var temp = {   
	                rows: params.limit,                         //页面大小
	                page: (params.offset / params.limit) + 1,   //页码
	                sort: params.sort,      //排序列名  
	                sortOrder: params.order //排位命令（desc，asc） 
	            };
	            return temp;
	        },
			columns:columnsArray
		});

		!function ($) {
		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
		        $(this).find('em:first').toggleClass("glyphicon-minus");      
		    }); 
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
		})

		//操作栏的格式化
        function actionFormatter(value, row, index) {
            var id = row.id;
            var result = "";
            result += "<a href='javascript:DeleteUserByIds(" + id + ")' class='btn btn-xs red' title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

            return result;
        }

       
	</script>	
	</body>
</html>